{extend name="base" /}


{block name="main"}
{php}
$empty = "<tr><td colspan='99'>no data</td></tr>";
{/php}
<div class="container" id="app">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">type</th>
                    <th scope="col">name</th>
                    <th scope="col">pic</th>
                    <th scope="col">num</th>
                    <th scope="col">date</th>
                    <th scope="col">Action</th>
                </tr>
                </thead>
                <tbody>
                {volist name="list" id="vo" empty="$empty"}
                <tr>
                    <td>{$vo.id}</td>
                    <td>{$vo.type}</td>
                    <td>{$vo.name}</td>
                    <td>
                        {if $vo.pic != ''}
                        <img src="{$vo.pic}" width="100" alt="">
                        {/if}
                    </td>
                    <td>
                        {if $vo.num>0}{$vo.num}{/if}
                    </td>
                    <td>
                        {if $vo.num>0}{$vo.start} ~ {$vo.end}{/if}
                    </td>
                    <td>
                        {if $vo.num>0}
                        <a href="{:url('home/upCart',['id'=>$vo.id])}" class="btn btn-sm btn-success">edit</a>
                        {/if}
                        <a href="javascript:;" @click="pay('/home/pay/id/'+{$vo.id})" class="btn btn-sm btn-secondary">pay</a>
                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script type="text/javascript">
    let app = new Vue({
        el: '#app',
        methods: {
            pay(url){
                axios.get(url)
                    .then(res=>{
                        alert(res.data.msg);
                        if (res.data.code == 1){
                            window.location.reload();
                        }
                    })
            }
        },
        mounted: function () {

        },
        data:{
        }
    });
</script>
{/block}